
<!--境内游页面-->
<template>
<div style="width: 1100px;margin: auto;">
  <div style="overflow: auto;margin: 20px 0   ">
    <div class="chyard-Tour">
        <p  class="tour-p" v-for="(item,index) in tourChyard" :key="index">
          <span class="tour-span" v-for="(item2,index2) in item" :key="index2"  @click="$router.push('commodityPage')">
             {{item2}}
          </span>
        </p>

    </div>
    <div class="trendsImg-Tour">
      <template>
        <el-carousel indicator-position="outside" ref="carousel">
          <el-carousel-item v-for="item in trendsImg" :key="item.imgID" :label="item.imgTitle">
            <img :src="item.imgUrl" alt="" width="860" height="283px"  @click="$router.push('commodityPage')">
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
  </div>
<!--  最新活动-->
  <div>
    <h2 style="border-bottom: 3px solid #cccccc;text-align: left">最新活动</h2>
    <div class="chyardTour-activity" v-for="(item,index) in activity" :key="index">
      <img :src="item.imgUrl" alt="" width="200px" height="134px"  @click="$router.push('commodityPage')">
      <p style="position: absolute;top: 105px;left: 8px;color: white">{{item.title}}</p>
      <p style="text-align: left;color: #b8b7b7;font-size: 12px">时间：{{item.date}}</p>
    </div>
  </div>
<!--今日景点团购-->
  <div>
    <h2 style="border-bottom: 3px solid #cccccc;text-align: left">今日景点团购</h2>
      <div v-for="(item,index) in multibuy" :key="index" class="chyardTour-multiBuy"  @click="$router.push('commodityPage')">
        <img :src="item.imgUrl" alt="" width="160px" height="120px" style="position: absolute;left: 0px">
        <p style="position:absolute; left: 170px;top: 10px;font-size: 14px">{{item.title}}</p>
        <p style="position:absolute;left: 180px;top: 65px ;font-size: 14px">团购价
          <span style="font-size: 20px;color: red">{{item.price}}</span></p>
      </div>
  </div>
<!--推荐景点-->
  <div>
    <h2 style="border-bottom: 3px solid #cccccc;text-align: left">推荐景点</h2>
    <div class="chyardTour-recommend" v-for="(item ,index) in recommend" :key="index"  @click="$router.push('commodityPage')">
      <img :src="item.imgUrl" alt="" width="256px" height="165px">
      <p style="font-size: 13px"><span style="color: #41a50e">推荐理由：</span>{{item.title}}</p>
    </div>
  </div>

</div>
</template>

<script>
export default {
  name: "churchyardPage",
  data(){
    return{
      tourChyard:[
          ['武汉欢乐谷','海洋世界'],
          ['黄鹤楼','海洋世界'],
          ['咸宁温泉','九宫山'],
          ['三峡大坝','当阳'],
          ['武汉景点酒店','宜昌景点酒店'],
          ['武汉酒店','宜昌酒店'],
          ['武汉酒店','宜昌酒店'],
      ],
      trendsID:0,
      trendsImg:[
        {imgUrl:require("../assets/jnimg/jn1.jpg"),imgTitle:'丽江千古情',imgID:1},
        {imgUrl:require("../assets/jnimg/jn2.jpg"),imgTitle:'错峰出游抄',imgID:2},
        {imgUrl:require("../assets/jnimg/jn3.jpg"),imgTitle:'妇女节特辑',imgID:3},
        {imgUrl:require("../assets/jnimg/jn4.jpg"),imgTitle:'三亚自由行',imgID:4},
        {imgUrl:require("../assets/jnimg/jn5.jpg"),imgTitle:'踏青至福建',imgID:5},
        {imgUrl:require("../assets/jnimg/jn6.jpg"),imgTitle:'新云南心旅程',imgID:6},
        {imgUrl:require("../assets/jnimg/jn7.jpg"),imgTitle:'东北特色游',imgID:7},
        {imgUrl:require("../assets/jnimg/jn8.jpg"),imgTitle:'张家界风情',imgID:8},
        {imgUrl:require("../assets/jnimg/jn9.jpg"),imgTitle:'三亚特价抄底',imgID:9},
        {imgUrl:require("../assets/jnimg/jn10.jpg"),imgTitle:'洛阳牡丹节',imgID:10},

      ],
      //热门活动
      activity:[
        {imgUrl:require("../assets/jnimg/typeact1.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact2.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact3.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact4.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact5.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact6.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact7.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact8.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact9.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
        {imgUrl:require("../assets/jnimg/typeact10.jpg"),title:'深度镇西南7日游',date:'2014.3.8-4.5'},
      ],
    //  今日团购
      multibuy:[
        {imgUrl:require("../assets/jnimg/jrtg.jpg"),title:'(团购)上海国际赛车场风洞亲子体验中心套餐',price:'￥556',},
        {imgUrl:require("../assets/jnimg/jrtg1.png"),title:'(团购)上海国际赛车场风洞亲子体验中心套餐',price:'￥556',},
        {imgUrl:require("../assets/jnimg/jrtg2.png"),title:'(团购)上海国际赛车场风洞亲子体验中心套餐',price:'￥556',}
      ],
    //  推荐景点
      recommend:[
        {imgUrl:require("../assets/jnimg/tj1.jpg"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
        {imgUrl:require("../assets/jnimg/tj2.png"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
        {imgUrl:require("../assets/jnimg/tj3.jpg"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
        {imgUrl:require("../assets/jnimg/tj4.png"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
        {imgUrl:require("../assets/jnimg/tj5.png"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
        {imgUrl:require("../assets/jnimg/tj6.png"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
        {imgUrl:require("../assets/jnimg/tj7.png"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
        {imgUrl:require("../assets/jnimg/tj8.jpg"),title:'最具代表性的桂林旅游线路，4天行程囊括最精华、最具观赏的景点！'},
      ]
    }
  },
  methods:{
    chooseCard:function(index){
      this.$refs.carousel.setActiveItem(index);
    }
  }
}
</script>

<style>
.el-carousel__indicators--labels .el-carousel__button{
  width: 86px;
  height: 30px;
  padding: 0;
}
.el-carousel__indicators--labels .el-carousel__indicator{
 padding: 0;
}
.el-carousel__container{
  height: 283px;
}
</style>

<style scoped>
.chyard-Tour{
  width: 200px;
  height: 265px;
  background-image: url("../assets/jnimg/dj.jpg");
  float: left;
  padding-top: 35px;
}
.trendsImg-Tour{
  width: 860px;
  float: right;
}

.chyardTour-activity{
  width: 200px;
  display: inline-block;
  position: relative;
  margin: 8px;
}
.chyardTour-multiBuy{
  width: 344px;
  height: 120px;
  display: inline-block;
  position: relative;
  margin: 8px;
  background-color: #e0dfdf;
}
.chyardTour-recommend{
  width: 256px;
  margin: 7px;
  display: inline-block;
}
.tour-p{
line-height: 35px;
  text-align: left;
}
.tour-span{
  display: inline-block;
  width: 98px;
  background-color: rgba(0,0,0,0.1);
  margin-left: 1px ;
  margin-top: 2px;
}
</style>